<script setup>
function click(Text){

    alert(Text)
}

/* 
    事件修饰符：
        .stop 停止事件再更新
        .capture 再补获阶段触发事件
        .prevent 取消默认行为
        .self 只有事件触发时才会有效
        .once 绑定一个一次性的事件
        .passive 主要用于提升滚动事件的性能
*/
</script>

<template>
    <div class="box1" @click="click(1)">
        <div class="box2" @click="click(2)">
            <div class="box3" @click="click(3)"></div>
        </div>
    </div>
</template>
<style scoped>
.box1{
    background-color: #bfa;
    width: 200px;
    height: 200px;
}
.box2{
    background-color: red;
    width: 150px;
    height: 150px;
}
.box3{
    background-color: yellow;
    width: 100px;
    height: 100px;
}
</style>